<template>
    <view
        v-if="show"
        :class="'zan-noticebar ' + (hasRightIcon ? 'zan-noticebar--within-icon' : '')"
        :style="'color: ' + color + ';background-color: ' + backgroundColor + '; padding: ' + paddingTop + 'px 10px;'"
    >
        <view v-if="leftIcon" class="zan-noticebar__left-icon">
            <image class="image" :src="leftIcon" />
        </view>
        <view class="zan-noticebar__content-wrap">
            <view class="zan-noticebar__content" :animation="animationData">
                {{ text }}
            </view>
        </view>

        <block v-if="mode">
            <zan-icon v-if="mode === 'closeable'" class="zan-noticebar__right-icon" type="close" @tap.native="_handleButtonClick" />
            <navigator v-if="mode === 'link'" :url="url" :open-type="openType">
                <zan-icon class="zan-noticebar__right-icon" type="arrow" />
            </navigator>
        </block>
    </view>
</template>

<script>
'use strict';

var VALID_MODE = ['closeable'];
var FONT_COLOR = '#f60';
var BG_COLOR = '#fff7cc';
export default {
    data() {
        return {
            show: true,
            hasRightIcon: false,
            width: undefined,
            wrapWidth: undefined,
            elapse: undefined,
            animation: null,
            resetAnimation: null,
            timer: null,
            animationData: ''
        };
    },
    props: {
        text: {
            type: String,
            default: ''
        },
        mode: {
            type: String,
            default: ''
        },
        url: {
            type: String,
            default: ''
        },
        openType: {
            type: String,
            default: 'navigate'
        },
        delay: {
            type: Number,
            default: 0
        },
        speed: {
            type: Number,
            default: 40
        },
        scrollable: {
            type: Boolean,
            default: false
        },
        leftIcon: {
            type: String,
            default: ''
        },
        color: {
            type: String,
            default: FONT_COLOR
        },
        backgroundColor: {
            type: String,
            default: BG_COLOR
        },
        paddingTop: {
            type: String,
            default: 4
        }
    },
    beforeMount: function attached() {
        var mode = this.mode;

        if (mode && this._checkMode(mode)) {
            this.setData({
                hasRightIcon: true
            });
        }
    },
    destroyed: function detached() {
        var timer = this.timer;

        if (timer) {
            clearTimeout(timer);
        }
    },
    methods: {
        _checkMode: function _checkMode(val) {
            var isValidMode = ~VALID_MODE.indexOf(val);

            if (!isValidMode) {
                console.warn('mode only accept value of ' + VALID_MODE + ', now get ' + val + '.');
            }

            return isValidMode;
        },
        _init: function _init() {
            var that = this;
            uni.createSelectorQuery()
                .in(this)
                .select('.zan-noticebar__content')
                .boundingClientRect(function (rect) {
                    if (!rect || !rect.width) {
                        return;
                    }

                    that.setData({
                        width: rect.width
                    });
                    uni.createSelectorQuery()
                        .in(that)
                        .select('.zan-noticebar__content-wrap')
                        .boundingClientRect(function (rect) {
                            if (!rect || !rect.width) {
                                return;
                            }

                            var wrapWidth = rect.width;
                            var _data = that;
                            var width = _data.width;
                            var speed = _data.speed;
                            var scrollable = _data.scrollable;
                            var delay = _data.delay;
                            if (scrollable && wrapWidth < width) {
                                var elapse = (width / speed) * 1000;
                                var animation = uni.createAnimation({
                                    duration: elapse,
                                    timeingFunction: 'linear',
                                    delay: delay
                                });
                                var resetAnimation = uni.createAnimation({
                                    duration: 0,
                                    timeingFunction: 'linear'
                                });
                                that.setData(
                                    {
                                        elapse: elapse,
                                        wrapWidth: wrapWidth,
                                        animation: animation,
                                        resetAnimation: resetAnimation
                                    },
                                    function () {
                                        that._scroll();
                                    }
                                );
                            }
                        })
                        .exec();
                })
                .exec();
        },
        _scroll: function _scroll() {
            var that = this;
            var _data2 = this;
            var animation = _data2.animation;
            var resetAnimation = _data2.resetAnimation;
            var wrapWidth = _data2.wrapWidth;
            var elapse = _data2.elapse;
            var speed = _data2.speed;
            resetAnimation.translateX(wrapWidth).step();
            var animationData = animation.translateX(-(elapse * speed) / 1000).step();
            this.setData({
                animationData: resetAnimation.export()
            });
            setTimeout(function () {
                that.setData({
                    animationData: animationData.export()
                });
            }, 100);
            var timer = setTimeout(function () {
                that._scroll();
            }, elapse);
            this.setData({
                timer: timer
            });
        },
        _handleButtonClick: function _handleButtonClick() {
            var timer = this.timer;

            if (timer) {
                clearTimeout(timer);
            }

            this.setData({
                show: false,
                timer: null
            });
        }
    },
    watch: {
        text: {
            handler: function observer(newVal) {
                this.setData({}, this._init);
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './index.css';
</style>
